Replaced transparent SVG with PNG to fix accessibility issues on dark mode #27
Conversation
There was a problem hiding this comment.
Interesting, will approve for now
Seems like in general we should update our stylesheets with a media query to check for dark mode and then invert the SVG so we don't lose out on the scalability of the SVG's.
Something akin to
@media (prefers-color-scheme: dark) {
img {
-webkit-filter: invert(.75);
filter: invert(.75)
}
}
@colevandersWands is there a global style sheet for the generated website where these changes can be made?
|
Would it make sense to try and figure out how to embed a white background directly into the SVG? @yoshimalaise Update: I just saw that the SVG has a white fill. The problem seems to lie elsewhere... |
|
I'm merging this for now so the site woks, thanks for the PR @kostasx! @yoshimalaise , I didn't know something like a global style sheet for SVGs existed. That does sound like a good way to go. Especially if already having a white background isn't enough |
Description
As you can see from the screenshot, there are some issues when browsing the content in GitHub's dark mode.
The SVG are transparent with black strokes, which makes it impossible to see.
The SVG files have been replaced by PNG files which include a white background. The SVG files have not been removed.
Checklists
General Checks
main/master